Page({
  data: {
    imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560847359&di=00ed1987c7b2e86faae3bca435aea9bb&imgtype=jpg&er=1&src=http%3A%2F%2Fpic37.nipic.com%2F20140113%2F8800276_184927469000_2.png'
  },

  onLoad() {
    const ctx = wx.createCanvasContext('imgs', this);

    this.getSystemInfo(res => {
      let win_width = res.windowWidth,
          win_height = res.windowHeight;

      ctx.drawImage(this.data.imgUrl, 0, 0, 300, 350);
      ctx.drawImage(this.data.imgUrl, (win_width - 50) / 2, (win_height - 50) / 2, 50, 50)
      ctx.draw();
    });
  },

  canvasMove(e){
    console.log(e);
  },

  saveImg() {
    this.getSystemInfo(res => {
      let win_width = res.windowWidth,
          win_height = res.windowHeight;

      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: win_width,
        height: win_height,
        destWidth: win_width,
        destHeight: win_height,
        canvasId: 'imgs',
        success(res) {
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success(res) {
              wx.showToast({
                icon: 'none',
                title: '保存图片成功'
              });
            }
          })
        }
      })
    });
  },

  getSystemInfo(callback) {
    callback && wx.getSystemInfo({
      success: res => {
        if(typeof callback === 'function'){
          callback(res);
        }else{
          throw new Error(callback + ' is not Function');
        }
      },
      fail(){
        wx.showToast({
          icon: 'none',
          title: '获取系统信息失败'
        });
      }
    })
  }
});